<template>
    <div class="card" :class="{'animated':isDel,'zoomOutLeft':isDel}">
        <div class="cardhead">
        <van-checkbox v-model="item.checked"><b>报价号JWR180211</b> <span class="ccc">200.000吨</span></van-checkbox>
        <h5>2017 印度 SLM 1-1/32 2.7~3.6 26</h5>
        </div>
        <div class="content">
        <h4>【提货单号】<b>2609</b></h4>
        <h4>【交货仓库】<b>张家港保税区41号仓库</b></h4>
        <h4>【CIQ索赔】 <i class="iconfont" @click="itemClick(0)" :class="{'icon-duoxuan':item.JHFS==0,'icon-duoxuanzhijiao':item.JHFS==1}"></i> 重量索赔无质量索赔
        </h4>
        <h4>【成交方式】现价成交 <i class="iconfont" @click="itemClick(0)" :class="{'icon-radioactive':item.CJFS==0,'icon-radio':item.CJFS==1}"></i> 
         <!-- 送货到厂<i  @click="itemClick(1)" class="iconfont" :class="{'icon-radioactive':item.JHFS==1,'icon-radio':item.JHFS==0}" ></i>  -->
        </h4>
        <h2></h2>
        <h4>【成&nbsp;交&nbsp;价】：<b class="red">72</b>美分/磅/即期</h4>
        <h4>【订单金额】<b class="red">70000000</b>元</h4>
        <i @click="delItem" class="iconfont icon-shanchu1"></i>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            item: Object
        },
        data() {
            return {
                isDel:false
            }
        },
        methods: {
            itemClick(v) {
                this.isDel = true;
                this.item.JHFS = v;
            },
            delItem() {               
                this.isDel = true;
                this.$emit('success', this.item);
            }
        },
    }
</script>

<style scoped lang='less'>
    .card {
        border-radius: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
        background: #fff;
        margin-bottom: 10px;
        text-align: left;
        overflow: hidden;
        margin: 0.5em;
        position: relative;
        letter-spacing: 0.05em;
        h2{
            border-bottom: 1px solid #f0f0f0;
            margin: 0.2em 0;
        }
        .cardhead {
            background: #f0f0f0;
            padding: 0.5em;
             
            h5 {
                margin-left: 2.5em;
                color: #000;
            }
        }
        .content {
            padding: 0.5em;
            >i {
                position: absolute;
                top: 0.5em;
                right: 0.5em;
                font-size: 22px;
                color: #ccc;
            }
        }
        .ccc {
            color: #999;
        }
        h4{
            font-weight: normal;i{
            color: #2cb98e;
        }
        }
        >i{
            position: absolute;
            top: 0.5em;
            right: 0.5em;
            font-size: 22px;
            color: #2cb98e;
        }
    }
</style>